<template>
    <el-row :gutter="20">
        <!--部门数据-->
        <el-col :span="6" :xs="24">
            <DeptSelectTree @confirm="deptConfirm"></DeptSelectTree>
        </el-col>
        <el-col :span="18" :xs="24">
            <el-table v-loading="loading" :data="tableData">

                <el-table-column label="用户编号" align="center" key="id" prop="id" />
                <el-table-column label="账户" width="150" align="center" key="userName" prop="userName"
                    :show-overflow-tooltip="true" />
                <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" :show-overflow-tooltip="true" />
                <el-table-column label="手机号码" align="center" key="mobile" prop="mobile" width="120" />
                <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-button type="warning" @click="doCancel(scope.row.id)"
                            v-if="hasUser(scope.row.id)">取消授权</el-button>
                        <el-button type="primary" @click="doGrant(scope.row.id)" v-else>授权</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <EleZh>
                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize" @pagination="getList" />
            </EleZh>

        </el-col>
    </el-row>
</template>
<script setup>
import DeptSelectTree from '../DeptSelectTree';
import useApp from '@/hooks';
const { $ } = useApp();
import { getRoleUsers } from '@/module/system/api/role';
import { queryList } from '@/module/system/api/user';
import {createOne, cancelOne} from '@/module/system/api/grant'
const loading = ref(false)
const userIds = ref([])
const tableData = ref([])
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    deptId: undefined,
})
const props = defineProps({
    roleId: {
        type: [String, Number]
    }
})

function doCancel(userId){
    cancelOne({
        roleId:props.roleId,
        userId:userId
    }).then(res=>{
        $.showToast({
            title:'取消成功',
            icon:'success'
        })
        getUsers()
        
    })
}
// 授权
function doGrant(userId){
    createOne({
        roleId:props.roleId,
        userId:userId
    }).then(res=>{
        $.showToast({
            title:'授权成功',
            icon:'success'
        })
        getUsers()
        
    })
}
// 检查函数
function hasUser(userId){
    return userIds.value.includes(userId)
}
// 查询
function handleQuery() {
    loading.value = true;
    queryList(queryParams.value).then(response => {
        console.log(response)
        loading.value = false;
        tableData.value = response.content;
        total.value = response.totalElements;
        
    })
}
// 部门确认
function deptConfirm(e) {
    queryParams.value.deptId = e
    queryParams.value.pageNum = 1
    handleQuery()
}
handleQuery();
function getUsers(){
// 执行查询
getRoleUsers(props.roleId).then(res => {
    let arr = res;
    userIds.value = arr.map(ele => {
        return ele.id
    })
})
}
getUsers();
</script>